<template>
  <div>
    <ScaleBox :width="2200" :height="1100" :delay="50" :style="backgroundDiv" :isFlat="true">
<!--      <dv-border-box-11 title="牛逼数据" class="border-box-4-class">-->
<!--        <div class="border-box-content" style="color: white;">dv-border-box-13</div>-->
<!--      </dv-border-box-11>-->

<!--      &lt;!&ndash;进度池数值&ndash;&gt;-->
<!--      <dv-percent-pond :config="percentConfig" style="width:200px;height:100px;"/>-->

<!--      &lt;!&ndash; 胶囊柱图 &ndash;&gt;-->
<!--      <dv-capsule-chart :config="capsuleConfig" style="width:300px;height:200px"/>-->

<!--      &lt;!&ndash; 动态环图 &ndash;&gt;-->

      <!--  -->

      <!-- 顶部大盒子 -->
      <div class="top-box" style="width: 100%; height: 5%;">
        <img class="left-img" src="@/assets/images/datav/左.png" alt="左">
        <img class="right-img" src="@/assets/images/datav/右.png" alt="右">
      </div>
      <div class="top-box" style="width: 100%; height: 6%;  display: flex; justify-content: center; align-items: center;">
<!--        <h1><span style="color: #01c4f7 ;margin-top:-8%;"><b></b></span></h1>-->
        <div style="color: #01c4f7; margin-top: -1%; font-size: 24px;">
          <h1>公卫医师处方权考核管理流程平台</h1>
        </div>

      </div>

      <!-- 左边大盒子 -->
      <div class="col-big-size fl">
        <br>
        <br>
        <br>
        <div class="col-little-size">
          <dv-border-box-1 title="左1" class="border-box-4-class">

            <div style=" margin-left:130px;  color: #01c4f7;margin-top: -40px; font-size: 20px;">
              <span>
                <h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实&nbsp;训&nbsp;预&nbsp;约</h1>
              </span>
            </div>
            <div style="margin-left: 210px; width: 180px; height: 25px;">
              <div style="color: #01c4f7; font-size: 14px;">
                <span>
                  <h1>今&nbsp;日&nbsp;预&nbsp;约&nbsp;:&nbsp;<span style="color: #E6A23C;">90</span></h1>
                </span>
              </div>
            </div>
            <div style="margin-left: 210px; width: 180px; height: 25px;">
              <div style="color: #01c4f7; font-size: 14px;">
              <span>
                <span>
                  <h1>本&nbsp;周&nbsp;预&nbsp;约&nbsp;:&nbsp;<span style="color: #E6A23C;">90</span></h1>
                </span>
              </span>
              </div>
            </div>
            <div style="margin-left: 210px; width: 180px; height: 25px;">
              <div style="color: #01c4f7; font-size: 14px;">
              <span>
                  <h1>上&nbsp;月&nbsp;预&nbsp;约&nbsp;:&nbsp;<span style="color: #E6A23C;">90</span></h1>
              </span>
              </div>
            </div>
            <div style="margin-left: 210px; width: 180px; height: 25px;">
              <div style="color: #01c4f7; font-size: 14px;">
              <span>
                <h1>下&nbsp;周&nbsp;预&nbsp;约&nbsp;:&nbsp;<span style="color: #E6A23C;">90</span></h1>
              </span>


              </div>
            </div>
          </dv-border-box-1>
        </div>
        <br>
        <br>
        <br>
        <div class="col-little-size">


          <dv-border-box-1 title="左2" class="border-box-4-class" style="text-align: center;">
            <div style=" margin-left:10px;  color: #01c4f7;margin-top: -40px; font-size: 20px;">
              <span>
                <h1>本周场地使用情况</h1>
              </span>
            </div>
            <dv-percent-pond :config="config" style="width:400px;height:130px; margin-top: 20px; display: inline-block;"></dv-percent-pond>
          </dv-border-box-1>
        </div>
      </div>

      <!-- 中间大盒子 -->
      <div class="center-big-size fl" style="display: flex; flex-direction: column; align-items: center;">
        <div style="width: 100%; height: 15%; display: flex; justify-content: center; align-items: center;">
          <!-- 用循环动态渲染 dv-border-box-8 -->
          <div   style="width: 50%; height: 50%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap;" >
            <div v-for="(item, index) in indicatorList" :key="index" style="width: 100px; height: 100px; margin-top: 10px; ">
              <dv-border-box-8 :title="item" :color="['#17c0eb', '#0b1d31']" :lineWidth="1">
                <div style="font-size: 82px; color: #ffeb3b; text-align: center; line-height: 100px;">
                  {{ item }}
                </div>
              </dv-border-box-8>
            </div>
          </div>

        </div>
        <div style="color: #eef1f6;margin-top: 15px; font-size: 20px;">
          总培训人次
        </div>
        <div style="width: 90%; height: 75%; margin-top: 1%;margin-left: 6%; display: flex; justify-content: center; align-items: center;">
          <dv-border-box-3>
            <div class="notice-container">
              <div class="notice-list">
                <div v-for="item in inform" :key="item.title" class="notice-item">
                  <h1>{{item.title}}</h1>
                  <span style="margin-top: 10px;">{{item.time}}</span>
                  <p  style="margin-top: 10px;">{{ item.content }}</p>
                </div>
              </div>
            </div>
          </dv-border-box-3>
        </div>
      </div>


      <!-- 右边大盒子 -->
      <div class="col-big-size1 fr">
        <br>
        <br>
        <br>
        <div class="col-little-size1">
          <dv-border-box-1 title="右1" class="border-box-4-class">
            <div style=" margin-left: 95px;  color: #01c4f7;margin-top: -40px; font-size: 20px;">
              <span>
                <h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实&nbsp;训&nbsp;预&nbsp;约</h1>
              </span>
            </div>
            <div class="decoration-container">
              <div style="margin-left: 50px; ">
                <dv-decoration-9  style="width:200px;height:190px;">66%</dv-decoration-9>
              </div>
              <div style="margin-right: 50px;">
                <dv-decoration-9  style="width:200px;height:190px;">66%</dv-decoration-9>
              </div>
            </div>
          </dv-border-box-1>
        </div>
        <br>
        <br>
        <br>
        <div class="col-little-size1">
          <dv-border-box-1 title="右2" class="border-box-4-class">
            <!-- 顶部标题区（参考第一张图） -->
            <div style="margin-left:165px; color: #01c4f7; margin-top: -40px; font-size: 20px;">
              <h1>近&nbsp;期&nbsp;考&nbsp;试</h1>
            </div>

            <!-- 考试名称横向滚动（参考第一张图跑马灯） -->
            <div class="decoration-container" style="margin-top:-10px; margin-left: 50px; width: 450px; height:70px;">
              <marquee behavior="scroll" direction="left" scrollamount="5" loop="-1">
                <div style="display: flex; align-items: flex-start;">
                  <div style="display: flex; flex-direction: column; align-items: center; margin-right: 16px;">
                    <div style="margin-top: 10px;">
                      <span style="color: #01c4f7">考试名称：2025年第十一周精术计划考核</span>
                    </div>
                    <div style="display: flex;">
                      <dv-decoration-11 style="width:150px;height:60px; margin-right: 10px;"></dv-decoration-11>
                      <dv-decoration-11 style="width:150px;height:60px; margin-right: 10px;"></dv-decoration-11>
                    </div>
                  </div>
                  <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
                    <div style="margin-top: 10px;">
                      <span style="color: #01c4f7">考试名称：2025年第十二周精术计划考核</span>
                    </div>
                    <div style="display: flex;">
                      <dv-decoration-11 style="width:170px;height:60px; margin-right: 10px;"></dv-decoration-11>
                      <dv-decoration-11 style="width:170px;height:60px; margin-right: 10px;"></dv-decoration-11>
                    </div>
                  </div>
                </div>
              </marquee>
            </div>

            <!-- 考试计划纵向滚动区（参考第二张图样式） -->
            <div class="exam-plan-container" style="margin-left: 35px; width: 90%; height: 140px; padding: 15px; border-radius: 8px; position: relative;">
              <!-- 标题区 -->
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                <span style="color: #01c4f7; font-size: 28px;">考试计划</span>
              </div>
              <!-- 滚动内容区 -->
              <div class="exam-list" style="height: 95px; overflow-y: hidden; position: relative;">
                <div class="scroll-content">
                  <div v-for="(item, index) in examSchedule" :key="index" class="exam-item">
                    <span style="color: #01c4f7; width: 120px; font-weight: bold;">{{ item.time }}</span>
                    <span style="color: #E6A23C; flex: 1;">{{ item.schedule }}</span>
                  </div>
                </div>
              </div>
            </div>

          </dv-border-box-1>
        </div>
      </div>

      <!-- 底部大盒子 -->
      <div class="top-box1">
        <dv-border-box-11 title="月度培训情况">
          <div id="chart-container" style="width: 100%; height: 300px;"></div>
        </dv-border-box-11>
      </div>

    </ScaleBox>
  </div>
</template>
<script>

import ScaleBox from 'vue2-scale-box'
import { DvDigit } from '@jiaminghi/data-view' // 注意是解构引入
import '@/assets/styles/datav.css'
import * as echarts from 'echarts';

export default {
  components: {
    DvDigit,
    /**
     * width 宽度 默认 1920
     * height 高度 默认 1080
     * bgc 背景颜色 默认 “transparent”
     * delay自适应缩放防抖延迟时间（ms） 默认 100
     * isFlat是否启用拉伸模式 默认 false
     * @scaleChange 缩放值发生改变的方法 可动态获取 scale 改变后的值 注意：拉伸模式下scale值为：
     * [x缩放值, y缩放值]；非拉伸模式下scale值为：等比缩放值
     */
    ScaleBox
  },
  data() {
    return {
      // 模拟指标数据，实际可替换为接口返回
      indicatorList: [3, 3, 5, 3, 6], // 直接存数字数组，更简洁,
      examTitles: [
        { title: '2025年第十一周精术计划考核' },
        { title: '2025年第十二周精术计划考核' },
        { title: '2025年第十三周精术计划考核' }
      ],

      inform: [
        { title: '演示',content : '欢迎各位学员们，参加2023年产褥期保健上岗培训班。这个是一个公告，发布时间，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班。',time :'2025-12-12 15:30:30' },
        { title: '通知1（2025-12-12 15:30:30）',content : '这个是一个公告，发布时间，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班',time :'2024-1-12 15:30:30' },
        { title: '通知2（2025-1-12 15:30:30）',content : '这个是一个公告，发布时间，参加2023年产褥期保健上岗培训班，参加2023年产褥期保健上岗培训班参加2023年产褥期保健上岗培训班参加2023年产褥期保健上岗培训班参加2023年产褥期保健上岗培训班',time :'2025-2-12 15:30:30' }
      ],

      examSchedule:[
        {time:'2025-07-23',schedule:'计划1计划1计划1计划1'},
        {time:'2025-07-24',schedule:'计划2计划1计划1计划1'},
        {time:'2025-07-25',schedule:'计划3计划1计划1计划1'},
        {time:'2025-07-26',schedule:'计划4计划1计划1计划1'},
        {time:'2025-07-27',schedule:'计划5计划1计划1计划1'},
        {time:'2025-07-28',schedule:'计划6计划1计划1计划1'},
      ],
      config: {
        value: 40,           // 进度值 40%
        colors: ['#00BAFF', '#0d2f61'], // 进度池配色
        borderWidth: 8,      // 边框宽度
        borderGap: 10,       // 边框间隙
        lineDash: [10, 5],   // 线条间隙
        textColor: '#fff331', // 文字颜色
        borderRadius: 15,    // 边框半径
        localGradient: true, // 局部渐变
        formatter: '已用:3 未使用:17' // 信息格式化
      },
      backgroundDiv : {
        backgroundImage : 'url(' + require('@/assets/images/datav/bg.2b530a0b.png') + ')',
        backgroundRepeat : 'no-repeat',
        backgroundSize : '100% 100%',
      },
      percentConfig:{
        value:60, //进度池数值
        colors:['#3DE7C9', '#00BAFF'], //	进度池配色
        borderWidth:3, //边框宽度
        borderGap:3, //边框间隙
        lineDash:[5,1], //线条间隙
        textColor: '#fff331', //文字颜色
        borderRadius:2, //边框半径
        localGradient:true, //局部渐变
        formatter:'{value}%', //信息格式化
      },
      capsuleConfig:{
        data:[
          {name: '南阳',value: 300},
          {name: '周口',value: 200},
          {name: '郑州',value: 100},
        ], //柱数据
        unit: '个', //单位
        colors:['#3DE7C9', '#00BAFF' ,'#fff331'], //环颜色
        showValue: true, //显示数值
      },
      activeConfig:{
        radius: 60, //	环半径	String|Number	'50%'|100	'50%'
        activeRadius: 50, //		环半径（动态）	String|Number	'55%'|110	'55%'
        data:[ //		环数据	Array<Object>	data属性	[]
          {name: '南阳',value: 300},
          {name: '周口',value: 200},
          {name: '郑州',value: 100},
        ],
        lineWidth:20, //		环线条宽度	Number	---	20
        activeTimeGap: 1500, //		切换间隔(ms)	Number	---	3000
        color: [], //		环颜色	Array<String>	[1]	[]
        digitalFlopStyle: [2], //		数字翻牌器样式	Object	---	[2]
        digitalFlopToFixed: 0, //		数字翻牌器小数位数	Number	---	0
        digitalFlopUnit: '', //		数字翻牌器单位	String	---	''
        animationCurve: 'easeOutCubic', //		动效曲线	String	Transition(opens new window)	'easeOutCubic'
        animationFrame: 50, //		动效帧数	Number	[3]	50
        showOriginValue: true, //		显示原始值	Boolean	---	false
      },

    }
  },
  watch: {},
  created() {
  },
  mounted() {
    this.autoScroll();
    this.updateDynamicScrollDistance();
    this.initChart();
  },
  methods: {
    autoScroll() {
      const examList = this.$el.querySelector('.exam-list');
      const scrollContent = this.$el.querySelector('.scroll-content');
      const items = Array.from(scrollContent.children);
      const itemHeight = items[0].offsetHeight;
      const totalItems = items.length;
      let currentIndex = 0;

      function scrollStep() {
        if (currentIndex < totalItems - 1) {
          currentIndex++;
        } else {
          currentIndex = 0;
        }
        scrollContent.style.transform = `translateY(-${currentIndex * itemHeight}px)`;
        requestAnimationFrame(scrollStep); // 继续下一帧的滚动
      }

      scrollStep(); // 开始滚动

      // Optionally, clear the interval when the component is destroyed
      this.$once('hook:beforeDestroy', () => {
        scrollContent.style.transform = ''; // 清除 transform 样式
      });
    },
    updateDynamicScrollDistance() {
      const scrollContent = this.$el.querySelector('.scroll-content');
      const items = Array.from(scrollContent.children);
      const itemHeight = items[0].offsetHeight;
      const totalItems = items.length;

      scrollContent.style.setProperty('--item-height', `${itemHeight}px`);
      scrollContent.style.setProperty('--total-items', `${totalItems}`);
    },
    initChart() {
      const chartDom = document.getElementById('chart-container');
      const myChart = echarts.init(chartDom);
      const option = {

        legend: {
          // 将图例放置在底部
          bottom: '25', // 或者使用具体的像素值，如 '10'
          // 可选：水平对齐方式
          align: 'left', // 或 'right', 'auto'
          // 可选：图例项之间的间距
          itemGap: 30,
          // 可选：图例文字颜色
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {},
        dataset: {
          dimensions: ['product', '教学总课时', '规培总课时', '考核总课时'],
          source: [
            { product: '01', '教学总课时': 13.3, '规培总课时': 5.8, '考核总课时': 93.7 },
            { product: '02', '教学总课时': 13.1, '规培总课时': 7.4, '考核总课时': 5.1 },
            { product: '03', '教学总课时': 16.4, '规培总课时': 6.2, '考核总课时': 8.5 },
            { product: '04', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '05', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '06', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '07', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '08', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '09', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '10', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '11', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
            { product: '12', '教学总课时': 12.4, '规培总课时': 5.9, '考核总课时': 3.1 },
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            formatter: '{value} 月'
          },
        },
        yAxis: {
          min: 0, // Y轴最小值
          max: 100, // Y轴最大值
          interval: 20, // Y轴刻度间隔为10
          axisLabel: {
            formatter: function(value) {
              return value; // 在每个刻度标签后添加“课时”
            }
          },
          splitNumber: 3 // Y轴刻度数量为5
        },
        series: [
          {
            type: 'bar',
            color: '#3DB6FC',
            label: {
              show: true, // 显示标签
              position: 'top', // 标签位置在柱子顶部
              color: '#fff' // 标签文字颜色
            }
          },
          {
            type: 'bar',
            color: '#FDB146',
            label: {
              show: true, // 显示标签
              position: 'top', // 标签位置在柱子顶部
              color: '#fff' // 标签文字颜色
            }
          },
          {
            type: 'bar',
            color: '#8C69FF',
            label: {
              show: true, // 显示标签
              position: 'top', // 标签位置在柱子顶部
              color: '#fff' // 标签文字颜色
            }
          },

        ]
      };
      option && myChart.setOption(option);
    },

  }
}
</script>
<style>

/* 顶部大盒子的样式 */
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 底部大盒子的样式 */
.top-box1 {
  /* 相对父容器定位，需确保父容器（ScaleBox）设置 position: relative; */
  position: absolute;
  bottom: 0; /* 固定在底部 */
  left: 50%; /* 水平方向先移到中间 */
  transform: translateX(-50%); /* 再基于自身宽度向左移一半，实现水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 26%;
}

.left_top1_table .content_td_title{
  width:92px;
  height:20px;
  font-size:20px;
  font-weight:400;
  color:#01c4f7;
}

.left_top1_table{
  width:100%;
  height:100%;
  padding-left: 35px;
}
.decoration-container {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 子元素之间的间距相等 */
  align-items: center; /* 垂直居中对齐 */
}
.exam-list::-webkit-scrollbar {
  width: 4px;
}
.exam-list::-webkit-scrollbar-thumb {
  background: #00afff;
  border-radius: 2px;
}
.exam-list::-webkit-scrollbar-track {
  background: #1a2d50;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.exam-list {
  height: 80px;
  overflow-y: hidden;
  position: relative;
}

.scroll-content {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease;
}

.exam-item {
  display: flex;
  margin-bottom: 8px;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.scroll-content {
  display: flex;
  flex-direction: column;
  animation: scrollAnimation 5s linear infinite; /* 调整时间以适应需求 */
}

.notice-container {
  height: 80%;
  margin-top: 30px;
  overflow: hidden;
  position: relative;
  padding: 20px; /* 容器内部间距 */
  border-radius: 10px; /* 圆角（可选） */
}

.notice-item {
  padding: 10px 20px; /* 调整内边距 */
  color: #eef1f6;
  margin: 30px 0; /* 减小上下间距 */
  text-align: left; /* 左对齐 */
}

.notice-item h1 {
  font-size: 24px;
  color: #01c4f7;
  margin-bottom: 10px; /* 标题与时间的间距 */
  text-align: center; /* 标题仍然居中 */
}

.notice-item span {
  font-size: 18px;
  color: #eef1f6;
  margin-bottom: 10px; /* 时间与内容的间距 */
  display: block; /* 确保时间单独一行 */
  text-align: center; /* 时间居中 */
}

.notice-item p {
  font-size: 16px;
  color: #eef1f6;
  text-align: left; /* 左对齐 */
  margin: 0; /* 去除默认间距 */
  text-indent: 2em; /* 首行缩进两个汉字字符 */
  line-height: 1.6; /* 行高，提升可读性 */
  word-wrap: break-word; /* 自动换行 */
  white-space: normal; /* 允许正常换行 */
}

.notice-list {
  animation: scroll-up 10s linear infinite;
}





@keyframes scroll-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
